import React from "react";

class ListSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchType: "productId", // productId,productName
      searchKeyWord: ""
    };
  }
  handleValueChange(e) {
    let name = e.target.name,
      value = e.target.value;
    this.setState({
      [name]: value
    });
  }
  handleSearch() {
    this.props.onSearch(this.state.searchType, this.state.searchKeyWord);
  }
  handleKeyUp(e) {
      if(e.keyCode === 13) {
          this.handleSearch();
      }
  }
  render() {
    return (
      <div className="row" style={{ marginBottom: "20px" }}>
        <div className="col-md-12">
          <div className="form-inline">
            <div className="form-group" style={{ marginRight: "10px" }}>
              <select
                className="form-control"
                onChange={e => this.handleValueChange(e)}
                name="searchType"
              >
                <option value="productId">按商品ID查询</option>
                <option value="productName">按商品名称查询</option>
              </select>
            </div>
            <div className="form-group" style={{ marginRight: "10px" }}>
              <input
                type="text"
                className="form-control"
                onChange={e => this.handleValueChange(e)}
                onKeyUp={e => this.handleKeyUp(e)}
                id="keyWord"
                name="searchKeyWord"
                style={{ width: "300px" }}
                placeholder="请输入关键词"
              />
            </div>
            <button
              className="btn btn-primary"
              onClick={() => this.handleSearch()}
            >
              搜索
            </button>
          </div>
        </div>
      </div>
    );
  }
}
export default ListSearch;
